.swiper {
    transition: all 0.3s;
}

.wrapper {
    padding: 30px;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .clear {
            color: #4AB8AC;
            font-size: 24px;
        }
    }
}
.steps-wrap {
    display: flex;
    align-items: center;

    .step {
        width: 300px;
        height: 60px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        .step-item {
            display: flex;
            align-items: center;
            justify-content: center;

            .icon-image {
                width: 30px;
                height: 30px;
            }

            @mixin common-before() {
                content: " ";
                width: 15px;
                height: 15px;
                display: inline-block;
                border-radius: 20px;
            }

            &.unfinished {
                &::before {
                    @include common-before();
                    background: #909399;
                }
            }

            &.underway {
                &::before {
                    @include common-before();
                    background: #4AB8AC;
                    display: none;
                }
            }

            &.finished {
                &::before {
                    @include common-before();
                    background: #4AB8AC;
                }
            }
        }
    }

    .step-num {
        padding-left: 30px;
        font-size: 26px;
        color: #909399;
        font-weight: 600;
    }
}

